<!DOCTYPE html>
<html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="styles/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--1.头部区域-->
    <div class="layui-header">
        <div class="layui-logo">CoolMeeting会议管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <dl th:text="${session.username}"></dl>
                <dl class="layui-nav-child">
                    <dd><a href="">修改密码</a></dd>

                </dl>
            </li>
            <li class="layui-nav-item"> <a href="">退了</a></li>
        </ul>
    </div>
    <!--2.左侧导航-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">

                <li class="layui-nav-item">
                    <a href="javascript:;">个人中心</a>
                    <dl class="layui-nav-child">
                <li class="layui-nav-item leftdaohang" data-url="MyNotificationServlet" mytitle="最新通知"><a>最新通知</a></li>
                <li class="layui-nav-item leftdaohang" data-url="ViewMyBookingServlet" mytitle="我的预定"><a>我的预定</a></li>
                <li class="layui-nav-item leftdaohang" data-url="ViewMyMeetingsServlet" mytitle="我的会议"><a>我的会议</a></li>
                </dl>
                </li>

                <li class="layui-nav-item">
                    <a href="javascript:;">会议预定</a>
                    <dl class="layui-nav-child">
                <li class="layui-nav-item leftdaohang" data-url="ToAddMeetingRoomServlet" mytitle="添加会议室"><a>添加会议室</a></li>
                <li class="layui-nav-item leftdaohang" data-url="ViewAllMeetingRoomsServlet" mytitle="查看会议室"><a>查看会议室</a></li>
                <li class="layui-nav-item leftdaohang" data-url="BookMeetingServlet?code=prepare" mytitle="预定会议"><a>预定会议</a></li>
                </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">员工管理</a>
                    <dl class="layui-nav-child">
                <li class="layui-nav-item leftdaohang" data-url="ToAddEmployeeServlet" mytitle="添加"><a>添加</a></li>
                <li class="layui-nav-item leftdaohang" data-url="ListEmployeeServlet" mytitle="查看员工信息"><a>查看</a></li>
                <li class="layui-nav-item leftdaohang" data-url="BookMeetingServlet?code=prepare" mytitle="搜索"><a>搜索</a></li>
                </dl>
                </li>

            </ul>
        </div>
    </div>
    <!--3.右侧主体内容区-->
    <div class="layui-body">
        <!--tabs标签-->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content" style="height: 150px;">
            </div>
        </div>
    </div>

    <!--4.底部固定区域-->
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        更多问题，欢迎联系<a href="mailto:webmaster@eeg.com">管理员</a>
    </div>
</div>
<script src="styles/layui/layui.js"></script>
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                var htmlurl=$(this).attr('data-url');
                var mytitle=$(this).attr('mytitle');
//                  alert("触发tab增加事件："+mytitle);
                //先判断是否已经有了tab
                var arrayObj = new Array();　//创建一个数组
                $(".layui-tab-title").find('li').each(function() {
                    var y = $(this).attr("lay-id");
                    arrayObj.push(y);
                });
//                    alert("遍历取到的数组："+arrayObj);
                var have=$.inArray(mytitle, arrayObj);  //返回 3,
                if (have>=0) {
                    //tab已有标签
//                        alert("遍历的已有标签："+mytitle);
                    element.tabChange('demo', mytitle); //切换到当前点击的页面
                } else{
                    //没有相同tab
//                      alert("遍历的没有相同tab："+mytitle);
                    element.tabAdd('demo', {
                        title:mytitle //用于演示
                        ,content: '<iframe style="width: 100%;height: 700px;" scrolling="yes" src='+htmlurl+' ></iframe>'
                        ,id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                    element.tabChange('demo', mytitle); //切换到当前点击的页面
                }
            }

        };
        $(".leftdaohang").click(function(){
            var type="tabAdd";
            var othis = $(this);
//                var htmlurl=$(this).attr('data-url');
//                var mytitle=$(this).attr('mytitle');
            active[type] ? active[type].call(this, othis) : '';
        });

    });
</script>
<!--<script>
    var loginurl="http://localhost:8088/user/showUser";
    var mytoken=sessionStorage.getItem("gltoken");
    console.log("缓存的token:"+mytoken);
    netWorking();
    $(".leftdaohang").click(function(){
        var htmlurl=$(this).attr('data-url');
        var mytitle=$(this).attr('mytitle');
        addTab(mytitle);
        document.getElementById("myiframe").src=htmlurl;
    });
    function addTab (tabname) {
         $(".layui-tab-title li").removeClass("layui-this");
        $('.layui-tab-title').append("<li>"+tabname+"</li>");
          //触发事件
    }
    function netWorking () {
            $.ajax({
                type:"post",
                url:loginurl,
                data:{
                     token:mytoken
                },
                success: function(res) {
                   console.log("home请求数据1.："+res);
                      var datas=JSON.parse(res);
                },
                error:function() {
                    alert("失败");
               }
            });
    }
</script>-->
</body>
</html>
